<template>
	<div>
		<!-- 创建食谱按钮 -->
		<div>
			<el-button type="success" @click="createUserDiet()">创建我的食谱</el-button>
			<el-button type="warning" @click="storeUserDiet()">保存我的食谱</el-button>
		</div>
		<div v-show="this.searchShow">
			
		</div>
			
		
		<!-- 搜索食物框 -->
		<div v-show="this.searchShow">
			<el-input placeholder="请输入内容" v-model="input" clearable style="width: 300px;"></el-input>
			<el-button type="info" @click="searchFood()">搜索</el-button>
		</div>
		
		<!-- 食物数据展示 -->
		<div v-show="this.foodShow">
			<el-table :data="this.tableData" style="width: 100%" :row-class-name="tableRowClassName">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column prop="foodName" label="名称" width="80"></el-table-column>
				<!-- <el-table-column prop="foodDesc" label="描述" width="280"></el-table-column> -->
				<el-table-column prop="foodCal" label="热量(KJ/100g)" width="130"></el-table-column>
				<el-table-column prop="foodCar" label="碳水(g/100g)" width="130"></el-table-column>
				<el-table-column prop="foodProtein" label="蛋白质(g/100g)" width="130"></el-table-column>
				<el-table-column prop="foodFat" label="脂肪(g/100g)" width="130"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="addBreakfast(scope.$index, scope.row)" type="primary">加入早餐
						</el-button>
						<el-button size="mini" @click="addLunch(scope.$index, scope.row)" type="primary">加入午餐
						</el-button>
						<el-button size="mini" @click="addDinner(scope.$index, scope.row)" type="primary">加入晚餐
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

	</div>
</template>


<style>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>

<script>
	export default {
		methods: {
			/* 隔行换色方法 */
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return 'warning-row';
				} else if (rowIndex % 2 == 0) {
					return 'success-row';
				}
				return '';
			},
			//发送ajax封装成方法
			searchFood() {
				//展示搜索框
				this.foodShow = true;
				//发送ajax
				this.axios.get("http://localhost:8080/diets/food/" + this.input).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res.data.data);
						this.tableData = res.data.data;
					})
			},
			//添加早餐功能
			addBreakfast(index, row) {
				console.log(index, row);
				//发送ajax，添加食物到早餐
				this.axios.put("http://localhost:8080/diets/cookbook/breakfast/" + row.id).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res);
						alert("添加成功");
						
				})
				
			},
			//添加午餐功能
			addLunch(index, row) {
				console.log(index, row);
				//发送ajax，添加食物到午餐
				this.axios.put("http://localhost:8080/diets/cookbook/lunch/" + row.id).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res);
						alert("添加成功");
						
				})
			},
			//添加晚餐功能
			addDinner(index, row) {
				console.log(index, row);
				//发送ajax，添加食物到晚餐
				this.axios.put("http://localhost:8080/diets/cookbook/dinner/" + row.id).then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res);
						alert("添加成功");
						
				})
			},
			//展示搜索框
			createUserDiet() {
				this.searchShow = "true";
				//发送ajax，在数据库产生一个空表
				//发送ajax
				this.axios.put("http://localhost:8080/diets/cookbook/1").then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res);
						
				})
				
			},
			//保存食谱
			storeUserDiet(){
				//发送ajax
				this.axios.put("http://localhost:8080/diets/cook/store/1").then(
					res => { //此处用function(res)无法对tableData进行赋值，但是用箭头函数就可以！！！
						console.log(res);
				})
				alert("保存");
			}
			
			

		},
		data() {
			return {
				tableData: [],
				foodShow: false,
				searchShow: false,
				input: ''
			}
		}
	}
</script>
